<!--  -->
<template>
  <div class="welcome-guide" v-if="dialogVisible">
    <div class="guide-w guide-w1 animated fadeInDown" v-if="shownum === 1">
      <img :src="guidewordsimg1"/>
      <div class="btn-w" @click="shownum = 2"></div>
    </div>
    <div class="guide-w guide-w2 animated fadeInUp" v-if="shownum === 2">
      <img :src="guidewordsimg2"/>
      <div class="btn-w" @click="shownum = 3"></div>
    </div>
    <div class="guide-w guide-w3 animated fadeInLeft" v-if="shownum === 3">
      <img :src="guidewordsimg3"/>
      <div class="btn-w" @click="shownum = 4"></div>
    </div>
    <div class="guide-w guide-w4 animated fadeInRight" v-if="shownum === 4">
      <img :src="guidewordsimg4"/>
      <div class="btn-w" @click="close"></div>
    </div>
    <div class="close-u" @click="close"></div>
    <div class="mask-g"></div>
  </div>
</template>

<script>
import guidewordsimg1 from '@/assets/images/guideimg/guidewords22.png'
import guidewordsimg2 from '@/assets/images/guideimg/guidewords23.png'
import guidewordsimg3 from '@/assets/images/guideimg/guidewords24.png'
import guidewordsimg4 from '@/assets/images/guideimg/guidewords19.png'
export default {
  data () {
    return {
      dialogVisible: false,
      shownum: 1,
      guidewordsimg1: guidewordsimg1,
      guidewordsimg2: guidewordsimg2,
      guidewordsimg3: guidewordsimg3,
      guidewordsimg4: guidewordsimg4
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
      this.shownum = 1
    },
    close () {
      this.dialogVisible = false
    }
  }
}

</script>
<style scoped lang="scss">
.mask-g{
  background: rgba(0,0,0,0.4);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
}
.close-u{
  position: fixed;
  top: 25px;
  right: 50px;
  width: 30px;
  height: 30px;
  z-index: 10000;
  background: url(~@/assets/images/guideimg/close.png) no-repeat center;
  cursor: pointer;
}
.guide-w {
  position: fixed;
  z-index: 10000;
  img{
    max-width:100%;
    max-height: 100%;
  }
  .btn-w{
    position: absolute;
    width: 250px;
    height: 100px;
    cursor: pointer;
  }
}
.guide-w1 {
  top: 95px;
  left: 330px;
  max-width: calc(100vw - 330px);
  img{
    max-height: calc(100vh - 95px);
  }
  .btn-w{
   left:50%;
   margin-left: -125px;
   bottom: 0;
  }
}
.guide-w2 {
  top: 320px;
  left:220px;
  max-width: calc(100vw - 220px);
  img{
    max-height: calc(100vh - 320px);
  }
  .btn-w{
    left: 18%;
    bottom: 0;
  }
}
.guide-w3 {
  top: 195px;
  left:220px;
  max-width: calc(100vw - 240px);
  img{
    max-height: calc(100vh - 200px);
  }
  .btn-w{
    left: 50%;
    margin-left: -100px;
    bottom: 0;
  }
}
.guide-w4 {
  top: 140px;
  right: 20px;
  max-width: 70vw;
  img{
    max-height: calc(100vh - 160px);
    }
  .btn-w{
   right: 50%;
   margin-right: -113px;
   bottom: 0;
  }
}
</style>
